<template>
	<!-- 总账户和报价师公用一个统计页面 -->
	<view class="body_box page-box" v-if="dataInfo">
		<!-- 时间选择器 -->
		<view class="time-select-box row-box" @click="pickerOpen()">
			<view style="width: 15%;">
				<u-image :src="require('@/static/img/date.png')" width="36rpx" height="36rpx"></u-image>
			</view>
			<view style="font-size: 30rpx;width: 65%;">{{queryParams.queTime}}</view>
			<view style="width: 20%;" class="center-box">
				<u-icon name="arrow-down"></u-icon>
			</view>
		</view>
		
		<view class="stat-money-box">
			<view>共计成交金额</view>
			<view class="row-box">
				<view style="font-weight: 900;">
					<text>￥</text>
					<text style="font-size: 60rpx;">{{dataInfo.turnoverAmount}}</text>
				</view>
				<view style="margin-left: 20rpx;margin-top: 10rpx;">
					<text>同比昨日</text>
					<!-- ↑  ↓ -->
					<text style="color: #ff9900;">
						{{dataInfo.turnoverAmountYesterday + " " + upOrDown()}}
					</text>
				</view>
			</view>
		</view>
		
		<!-- <view class="row-box">
			<view class="img-left-box stat-img-box"></view>
			<view class="img-right-box stat-img-box"></view>
		</view> -->
		
		<!-- 第一行 -->
		<view class="stat-line-box" style="margin-top: 20rpx;">
			<view class="row-box">
				<view class="view-box center-box">
					<view class="img-box center-box blue-bg-shadow">
						<image class="icon_img_mini" :src="require('@/static/img/quan_xian/sel_order.png')"></image>
					</view>
				</view>
				
				<view class="view-box">
					<view>询单量</view>
					<view style="color: #45bcff;">
						<text class="text-font-box">{{dataInfo.inquiryCount}}</text>
						<text>单</text>
					</view>
				</view>
				
				<view class="view-box">
					<view>报单量</view>
					<view style="color: #45bcff;">
						<text class="text-font-box">{{dataInfo.offerCount}}</text>
						<text>单</text>
					</view>
				</view>
				
				<view class="view-box">
					<view>成交量</view>
					<view style="color: #45bcff;">
						<text class="text-font-box">{{dataInfo.successCount}}</text>
						<text>单</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 第二行 -->
		<view class="stat-line-box">
			<view class="row-box">
				<view class="view-box center-box">
					<view class="img-box center-box purple-bg-shadow">
						<image class="icon_img_mini" :src="require('@/static/img/statis.png')"></image>
					</view>
				</view>
				
				<view class="view-box">
					<view>竞价失败</view>
					<view style="color: #3b57ff;">
						<text class="text-font-box">{{dataInfo.offerFailCount}}</text>
						<text>单</text>
					</view>
				</view>
				
				<view class="view-box">
					<view>报单率</view>
					<view style="color: #3b57ff;">
						<text class="text-font-box">{{dataInfo.offerRate}}</text>
						<text>%</text>
					</view>
				</view>
				
				<view class="view-box">
					<view>成交率</view>
					<view style="color: #3b57ff;">
						<text class="text-font-box">{{dataInfo.successRate}}</text>
						<text>%</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 第三行 -->
		<view class="stat-line-box">
			<view class="row-box">
				<view class="view-box center-box">
					<view class="img-box center-box yellow-bg-shadow">
						<image class="icon_img_mini" :src="require('@/static/img/quan_xian/red_bao.png')"></image>
					</view>
				</view>
				
				<view class="view-box">
					<view>退单量</view>
					<view style="color: #fbac1e;">
						<text class="text-font-box">{{dataInfo.refundCount}}</text>
						<text>单</text>
					</view>
				</view>
				
				<view class="view-box">
					<view>发放红包</view>
					<view style="color: #fbac1e;">
						<text class="text-font-box">0.00</text>
						<text>元</text>
					</view>
				</view>
				
				<view class="view-box">
					<view>回收均价</view>
					<view style="color: #fbac1e;">
						<text class="text-font-box">{{dataInfo.recycleAveragePrice}}</text>
						<text>元</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="ucharts-box">
			<view class="row-box" style="margin: 40rpx 20rpx;">
				<view class="h2-font" style="width: 65%;">回收趋势</view>
				<view class="chart-picker-box center-box" @click="chartPickerOpen()">
					<text>{{chartPickerData[0][chartSel].l}}</text>
					<text style="opacity: 0;">H</text>
					<u-icon name="arrow-down-fill" color="#fff"></u-icon>
				</view>
			</view>
			<!-- 图标 
				解决小程序层级过高问题，发布时将下面两行放入下面 qiun-data-charts
				canvas-id="A9hgjh1gFAZwQxYrcRoGwnwtSFKD8JWi"
				:canvas2d="true"
			 -->
			<qiun-data-charts 
				type="column" 
				:opts="opts" 
				:tooltipShow="false" 
				:chart-data="chartData"
				canvas-id="A9hgjh1gFAZwQxYrcRoGwnwtSFKD8JWi"
				:canvas2d="true"
			></qiun-data-charts>
			
		</view>
		
		<view class="ucharts-box">
			<view class="row-box" style="margin: 40rpx 20rpx;">
				<view class="h2-font" style="width: 65%;">月结报告</view>
			</view>
			
			<view class="month-box">
				您在<text>{{dataInfo.selectionMonth}}</text>月参与报价<text>{{dataInfo.monthOfferCount}}</text>单，
				成功回收<text>{{dataInfo.monthSuccessCount}}</text>台旧机，成功率<text>{{dataInfo.monthSuccessRate}}%</text>，
				回收金额<text>{{dataInfo.monthRecycleAmount}}</text>元。
			</view>
		</view>
		
		<!-- 底部顶起块 -->
		<view style="width: 100vw;height: 15vh;"></view>
		
		<u-datetime-picker 
			:show="show" 
			v-model="pickerTime" 
			mode="date" 
			@cancel="handleClose" 
			@confirm="pickerConfirm"
			@close="handleClose"
			:closeOnClickOverlay="true"
		></u-datetime-picker>
		
		<u-picker 
			:show="chartShow" 
			:closeOnClickOverlay="true" 
			:columns="chartPickerData" 
			keyName='l' 
			@cancel="handleChartClose" 
			@close="handleChartClose"
			@confirm="chartpickerConfirm"
		></u-picker>
	</view>
</template>

<script>
	import {data_string} from "@/utils/dateUtils.js";
	import uCharts from "@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js";
	export default {
		data() {
			return {
				dataInfo: undefined,
				chartShow: false,
				queryParams: {
					queTime: data_string(new Date(), 'yyyy-MM-dd') ,
					recycleTendencyType: undefined
				},
				//选中值
				chartSel: 0,
				chartPickerData: [
					[
						{l:'订单量', f: 'unit'},
						{l:'报单量', f: 'unit'},
						{l:'成交量', f: 'unit'},
						{l:'成交率', f: 'rate'},
						{l:'成交金额', f: 'money'},
						{l:'成交均价', f: 'money'}
					]
				],
				chartData: {},
				/* ucharts 样式 */
				opts: {
					xAxis: {
						gridColor: '#f2f8fc'
					},
					legend: {
						show: false
					},
					yAxis: {
						disabled:true,
						disableGrid: true
					},
					extra: {
						column: {
							width: 5,
							barBorderRadius: [20,20,20,20],
							linearType: 'custom',
							customColor: ['#71d5a1'],
							colorStop: 0.3
						}
					}
				},
				show: false,
				pickerTime: Number(new Date()),
			}
		},
		onReady() {
			//单位 单
			uCharts.formatter['unit'] = function(val) {
				return val + "单"
			}
			//钱
			uCharts.formatter['money'] = function(val) {
				return "￥" + val;
			}
			//利率
			uCharts.formatter['rate'] = function(val) {
				return val + "%";
			}
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				switch(this.chartSel) {
					case 0: this.queryParams.recycleTendencyType = 1;break;
					case 1: this.queryParams.recycleTendencyType = 2;break;
					case 2: this.queryParams.recycleTendencyType = 3;break;
					case 3: this.queryParams.recycleTendencyType = 4;break;
					case 4: this.queryParams.recycleTendencyType = 5;break;
					case 5: this.queryParams.recycleTendencyType = 6;break;
				}
				this.$request("/appRecoverApi/order/queryRecycleStaticsInfo", "post", this.queryParams).then(res => {
					this.dataInfo = res.data;
					this.getChartsData(this.chartPickerData[0][this.chartSel].f)
				})
			},
			upOrDown() {
				let res = "0%↑";
				if(this.dataInfo.turnoverAmountThanOldTimeUp > 0) {
					res = this.dataInfo.turnoverAmountThanOldTimeUp + "%↑"
				}
				
				if(this.dataInfo.turnoverAmountThanOldTimeDown > 0) {
					res = this.dataInfo.turnoverAmountThanOldTimeDown + "%↓"
				}
				return res;
			},
			getChartsData(fmt) {
				 const arr = this.dataInfo.recycleTendency;
				 let cate = [];
				 let data = [];
				 arr.forEach(it => {
					 cate.push(it.key);
					 data.push(it.value);
				 }) 
				let res = {
					categories: cate,
					series:[
						{
							name:'金额',
							color: "#dbf1e1",
							format: fmt,
							data: data
						}
					]
				}
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			handleClose() {
				this.show = false;
			},
			handleChartClose() {
				this.chartShow = false;
			},
			/* chart接口获取数据 */
			pickerConfirm(e) {
				this.queryParams.queTime = data_string(e.value, "yyyy-MM-dd");
				this.show = false;
				this.init();
			},
			chartpickerConfirm(e) {
				if(e == null) {
					this.chartSel = 0;
				}else {
					this.chartSel = e.indexs[0];
				}
				this.chartShow = false;
				this.init();
			},
			pickerOpen() {
				this.show = true;
			},
			chartPickerOpen() {
				this.chartShow = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-box {
		background-image: linear-gradient(#71d5a1 0%, #f2f8fc 30%);
	}
	.ucharts-box {
		background-color: #fff;
		padding: 20rpx;
		margin-top: 30rpx;
		border-radius: 20rpx;
	}
	.stat-money-box{
		margin-top: 60rpx;
		line-height: 70rpx;
	}
	.stat-img-box {
		background-size: cover;
		width: 45vw;
		height: 140rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}
	.stat-line-box {
		background-color: #fff;
		padding: 20rpx 0;
		margin-top: 10rpx;
		border-radius: 20rpx;
		line-height: 60rpx;
		.view-box {
			width: 22vw;
			font-size: 24rpx;
		}
		.text-font-box {
			font-size: 38rpx;
			font-weight: 900;
		}
	}
	.chart-picker-box {
		background-color: #5fd3fe;
		color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		margin-top: -20rpx;
	}
	.month-box {
		background-color: #f2f8fc;
		padding: 20rpx;
		border-radius: 20rpx;
		text {
			font-weight: 900;
			color: #ffa054;
		}
	}
</style>
